<!-- 开展 -->
<template>
  <img v-if="isTitle" src="@/assets/xinshuoImages/line.png" alt="" style="width: 100%" />
  <div ref="FinishWorkRef" class="box">
    <div class="seq">
      <div class="line1"></div>
      <div class="txt">结束作业</div>
      <div class="line2"></div>
    </div>
    <div class="center">
      <div class="oneCenter">
        <div class="leftBox">
          <div class="BoxTop">
            <TitleAndLogo
              :show-two="true"
              title="现场整理完毕"
              img-url1="AI.png"
              img-url2="A-face1.png"
              style="width: 224px; font-size: 16px; margin-bottom: 10px"
            />
          </div>
          <div class="videoBox">
            <video :src="videoUrl" class="video" muted autoplay controls loop></video>
            <!-- 定位状态 -->
            <div class="fixStatus">
              <div v-for="item in statusArr.status1" :key="item" class="oneStatus">
                <TitleAndstatus :title="item" />
              </div>
            </div>
          </div>
        </div>
        <div class="rightBox">
          <div class="right1" style="width: 50%">
            <TitleAndLogo
              title="正常下道"
              img-url1="AI.png"
              style="width: 145px; font-size: 16px; margin-bottom: 10px"
            />
            <div class="table-container">
              <div class="table-header">
                <table>
                  <tbody>
                    <tr
                      v-for="(column, index) in columns"
                      :key="index"
                      :class="index == 1 || index == 2 ? 'heightBig' : 'heightsmall'"
                    >
                      <th>{{ column }}</th>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="table-body">
                <table>
                  <tbody>
                    <tr
                      v-for="row in tableData"
                      :key="row.id"
                      :class="row.id == 1 || row.id == 2 ? 'heightBig' : 'heightsmall'"
                    >
                      <td>{{ row.title }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div class="right2" style="width: 50%">
            <TitleAndLogo
              title="工器具入库完整"
              img-url1="AI.png"
              style="width: 196px; font-size: 16px; margin-bottom: 10px"
            />
            <el-table
              ref="table1"
              class="hd-table"
              :data="tableTool"
              border
              style="width: 100%"
              :header-cell-style="{
                background: '#EEF5FF',
                textAlign: 'center',
                color: '#111',
              }"
            >
              <el-table-column prop="tool" label="工器具" width="218px" />
              <el-table-column prop="status" label="入库状态" width="159px" />
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { nextTick, reactive, ref } from 'vue'
import urls from '@/utils/url'
let FinishWorkRef = ref()
let props = defineProps({
  isTitle: {
    type: Boolean,
    default: true,
  },
  tableTool: {
    type: Array,
    default: () => [],
  },
  videoUrl: {
    type: String,
    default: '',
  },
})
let statusArr = reactive({
  status1: ['工器具无遗留'],
})
const columns = reactive(['下道口', '上锁命令号获取正常', '下道人员核对', '下道时间'])

const tableData = reactive([
  { id: 0, title: 'XXXXXX下道口' },
  { id: 1, title: 'XXXXXXXXXXX' },
  { id: 2, title: '核对无误，所有上道作业人员均已下道' },
  { id: 3, title: '07:50' },
  // 更多数据行...
])

const table1 = ref()
// 设置定时器
let timers1
const scrollUp1 = (tableRef) => {
  const demo = tableRef.$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0]
  const tableScroll = ref(true)
  demo.addEventListener('mouseover', () => {
    tableScroll.value = false
  })
  demo.addEventListener('mouseout', () => {
    tableScroll.value = true
  })
  timers1 = setInterval(() => {
    // if (tableScroll.value) {
    demo.scrollTop += 1
    if (demo.clientHeight + demo.scrollTop >= demo.scrollHeight - 5) {
      demo.scrollTop = 0
    }
    // }
  }, 60)
}
onMounted(() => {
  nextTick(() => {
    scrollUp1(table1.value)
  })
})

onBeforeUnmount(() => {
  clearInterval(timers1) // 销毁定时器
})
defineExpose({
  FinishWorkRef,
})
</script>

<style lang="scss" scoped>
@import '@/styles/centerStyle.scss';
.box {
  // height: 600px;
  .leftBox {
    height: 100%;
  }
  .rightBox {
    height: 100%;
  }
}
// 左侧序列
.seq {
  height: 522px;
}
.rightBox {
  display: flex;
}
.right1 {
  margin-right: 40px;
}
.hd-table {
  height: 404px;
  text-align: center;
}

// 视频上定位表格
.fixTable {
  text-align: center;
  font-size: 16px;
  font-family:
    Source Han Sans CN-Regular,
    Source Han Sans CN;
  font-weight: 400;
  color: #fff;
  line-height: 23px;
  width: 100%;
  position: absolute;
  bottom: 0;
  margin: auto;
  height: 56px;
  background: rgba(0, 0, 0, 0.4);
}
.success {
  display: flex;
  align-items: center;
  justify-content: center;
  p {
    color: #00be1b;
    margin-left: 7px;
  }
}
// 表格垂直
.table-container {
  display: flex;
  height: 406px !important;
}
.table-header {
  width: 82px;
  /* height: 50px; */
  background: #eef5ff;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
}

.table-body {
  width: calc(100% - 82px);
}

.table-header table,
.table-body table {
  width: 100%;
  border-collapse: collapse;
}

.table-header th,
.table-body td {
  padding: 8px;
  border: 1px solid #1d6be1;
}
.table-header th {
  border-right: none;
}
.heightBig {
  height: 153px;
}
.heightsmall {
  height: 49px;
}
</style>
